<template>
  <div class="wrap">
    <div class="content">
      <div class="box" v-show="isLoginShow">
        <div class="form-title">登录</div>
        <div class="form-text-input">
          <input type="text" v-model="username" placeholder="用户名">
        </div>
        <div class="form-text-input">
          <input type="password" v-model="password" placeholder="密码">
        </div>
        <div class="form-check-input">
          <div class="check-left">
            <input type="checkbox" v-model="autoLogin">下次自动登录
          </div>
          <div class="check-right">
            <a href="#">忘记密码</a>
          </div>
        </div>
        <div class="form-button">
          <button type="button" @click="tryToLogin">登录</button>
        </div>
        <div class="form-jump">
          <span>还没有账号？</span>
          <a @click="changeShow">马上注册</a>
        </div>
      </div>
      <div class="box" v-show="!isLoginShow">
        <div class="form-title">注册</div>
        <div class="form-text-input">
          <input type="text" v-model="username" placeholder="用户名">
        </div>
        <div class="form-text-input">
          <input type="password" v-model="password" placeholder="密码">
        </div>
        <div class="form-text-input">
          <input type="password" v-model="passwordRepeat" placeholder="重复密码">
        </div>
        <div class="form-button">
          <button type="button" @click="tryToRegister">注册</button>
        </div>
        <div class="form-jump">
          <span>已有账号？</span>
          <a @click="changeShow">马上登录</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cookie from 'js-cookie'
import { login, register } from '@/http/api/user'

export default {
  name: "LoginView",
  data() {
    return {
      isLoginShow: true,
      autoLogin: false,
      username: '',
      password: '',
      passwordRepeat: ''
    }
  },
  methods: {
    changeShow() {
      this.isLoginShow = !this.isLoginShow
      this.username = ''
      this.password = ''
      this.passwordRepeat = ''
    },
    async tryToLogin() {
      if (this.username === '' || this.password === '') {
        return this.$message.warning('用户名和密码不能为空')
      }

      let res = await login({
        username: this.username,
        password: this.password
      })

      if(res.code !== 0) {
        this.$message.warning(res.msg)
        return
      }

      cookie.set('token', res.data.token)
      cookie.set('username', this.username)
      console.log('rank', res.data.rank)

      this.$message.success("登录成功")
      this.$router.push('/user')
    },
    async tryToRegister() {
      if (this.username === '' || this.password === '') {
        return this.$message.warning('用户名和密码不能为空')
      }
      if (this.password !== this.passwordRepeat) {
        return this.$message.warning('两次输入密码不一致')
      }

      let res = await register({
        username: this.username,
        password: this.password
      })

      if(res.code !== 0){
        this.$message.warning(res.msg)
        return
      }

      this.$message.success("注册成功")
      this.isLoginShow = true
    }
  }
}
</script>

<style lang="less" scoped>
.wrap {
  background: url("../assets/bg.jpg") no-repeat center;
  background-size: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  .content {
    .box {
      width: 360px;
      background: #FFF;
      margin: 200px auto 0;

      .form-title {
        font-size: 25px;
        text-align: center;
        color: #FF7F50;
        padding: 15px 0;
        width: 300px;
        margin: 0 auto;
      }

      .form-text-input {
        width: 300px;
        height: 40px;
        border: solid 1px #CCC;
        margin: 20px auto 0 auto;
        background: #FFF;

        input {
          width: 290px;
          height: 30px;
          margin: 5px;
          border: none;
          font-family: "微软雅黑", serif;
          font-size: 15px;
          color: #666;
          outline: medium none;
        }
      }

      .form-check-input {
        width: 300px;
        margin: 10px auto;
        overflow: hidden;

        .check-left {
          float: left;
          font-size: 13px;

          input {
            position: relative;
            top: 2px;
          }
        }

        .check-right {
          float: right;

          a {
            text-decoration: none;
            color: #3CF;
            font-size: 13px;
          }
        }
      }

      .form-button {
        width: 300px;
        height: 40px;
        margin: 10px auto;

        button {
          width: 100%;
          height: 100%;
          border: none;
          color: #FFF;
          font-size: 14px;
          background: #FF7F50;
          cursor: pointer;
        }
      }

      .form-jump {
        width: 300px;
        margin: 0 auto;
        padding-bottom: 30px;
        font-size: 14px;
        height: 40px;

        span {
          color: #333;
        }

        a {
          text-decoration: none;
          color: #3CF;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>